<template>
  <el-dialog
    v-model="dialogVisible"
    v-if="load"
    :close-on-click-modal="false"
    title="查看图片"
    width="936"
    :before-close="handleClose"
    :z-index="2000"
  >
    <el-tabs v-model="activeSKU" type="card">
      <el-tab-pane
        :label="i.sku"
        :name="i.sku"
        v-for="(i, index) in imgList"
        :key="index"
      >
        <template v-if="i.images_assignment_list.length">
          <div
            class="mt-4"
            v-for="item of i.images_assignment_list"
            :key="item.custom_tag"
            style="margin-bottom: 20px"
          >
            <el-tabs
              v-model="activeName"
              type="card"
              class="demo-tabs"
              @tab-click="handleClick"
            >
              <el-tab-pane :label="item.custom_tag || '暂无标签名'" name="first">
                <div v-for="imageListItem of item.image_list" :key="imageListItem.type">
                  <div
                    style="
                      padding: 15px 0;
                      text-align: center;
                      border-bottom: 1px solid #e4e7ed;
                      border-left: 1px solid #e4e7ed;
                      border-right: 1px solid #e4e7ed;
                    "
                  >
                    {{ imageListItem.label_type }}（{{ imageListItem.values.length }}）
                  </div>
                  <ul
                    style="
                      padding: 16px 16px 16px 19px;
                      border: 1px solid #e4e7ed;
                      margin-top: -1px;
                      border-bottom-right-radius: 4px;
                      border-bottom-left-radius: 4px;
                      display: flex;
                      align-items: center;
                      flex-flow: wrap;
                    "
                  >
                    <li
                      style="margin-bottom: 10px"
                      class="listMr"
                      v-for="(imgChilder, idx) of imageListItem.values"
                      :key="idx"
                    >
                      <VImage
                        :src="imgChilder.url"
                        :width="128"
                        :height="128"
                        :previewlist="photoSort(imgChilder, imageListItem.values)"
                      >
                      </VImage>

                      <div class="overflow-line1" style="width: 128px">
                        {{ imgChilder.name }}
                      </div>
                      <div class="text-[#999999]">{{ imgChilder.image_for_text }}</div>
                    </li>
                  </ul>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </template>
        <el-empty v-else :image-size="200" description="暂无图片" />
      </el-tab-pane>
    </el-tabs>

    <div
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
      "
    >
      <el-button type="" @click="dialogVisible = false"> 关闭 </el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import VImage from "@/components/Image/index.vue";
import { photoSort } from "@/utils/index";
import { getDetgetImagesail } from "../api";

const dialogVisible = ref(false);
const imgList = ref([]);
const load = ref(false);
const open = async (taskId) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  getImage(taskId);
  dialogVisible.value = true;
};

const getImage = (taskId) => {
  getDetgetImagesail({ taskId }).then(({ data }) => {
    if (data.length > 0) {
      imgList.value = data;
      activeSKU.value = data[0].sku;
    }
  });
};

const handleClose = (done) => {
  done();
};

// tab
const activeName = ref("first");
const activeSKU = ref("");
const handleClick = (tab, event) => {};

defineExpose({ open });
</script>
<style lang="scss" scoped>
:deep(.el-tabs__header) {
  margin-bottom: 0;
}

.listMr {
  margin-right: 18px;

  &:nth-of-type(6n + 6) {
    margin-right: 0;
  }
}
</style>
